<html>
<head>
<title>ProgressBar example</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="../src/main/js/loader.js"></script>
<script type="text/javascript">

	load('core.ui.Button');
	load('core.ui.ProgressBar');

	function init() {

		// Create progress bar
		progress = new core.ui.ProgressBar();
		progress.setItemCount(24);
		progress.setPos(100);
		progress.center();
		progress.show();
			
		// Create button
		var b = new core.ui.Button();
		b.setText('Restart progress...');
		b.move(progress.getX() + progress.getWidth()/2 - b.getWidth()/2,
			progress.getY() + progress.getHeight() + 2);

		b.onclick = function() {
			emulateProgress();
		}
		b.show();
	}
	
	function emulateProgress() {
		
		var pos = arguments.callee.pos || 0;
		pos += 100 / progress.getItemCount();
		arguments.callee.pos = pos;
		
		if (pos <= 100) {
			progress.setPos(pos);
			setTimeout(emulateProgress, 100);
		} else {
			arguments.callee.pos = undefined;
		}
	}
	
</script>
</head>

<body onload="init()" />
</html>